<script setup>
import { useCounterStore } from "@/store/index.ts";
import { storeToRefs } from 'pinia';
const counterStore = useCounterStore();
// 不能对counterStore进行解构,解构响应式丢失
// const {count,doubleCount} =counterStore
// 保持数据响应式,用storeTorefs函数
const {count,doubleCount}=storeToRefs(counterStore)

const reset=()=>{
  counterStore.$reset()
}
const changeStatus=()=>{
  counterStore.$patch({
    message:'大熊',
    count:1000
  })
}

const replaceStatus=()=>{
  console.log(123,'123')
  counterStore.$state={count: 666, message: 'Paimon'}
}
</script>

<template>
  <h1>test</h1>
  <div>{{count}}</div>
  <div>{{ counterStore.count }}</div>
  <div>{{doubleCount}}</div>
  <div>{{counterStore}}</div>
 
  <button @click="counterStore.increment">double</button>
  <button @click='reset'>重置</button>
  <button @click='changeStatus'>改变状态</button>
  <button @click='replaceStatus'>替换状态</button>
</template>



<style lang="scss" scoped>

</style>